<template>
    <div class="msgP">

         <u-navbar :is-back="true" title="消息" back-text='' >
      <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<!-- <div>
                <img @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </div> -->
			</view>
      </u-navbar>

    


      <div class="headP" >

    <div class="tabwiperC">
      <u-tabs-swiper
        ref="tabs"
        :list="list"
        active-color="#4dbf92"
        inactive-color=""
        count="count"
        height="120"
        :is-scroll="false"
        :current="current"
        bar-width="100"
        gutter="100"
        @change="tabsChange"
      ></u-tabs-swiper>
       </div>
      </div>
       <div class="hr"></div>

      <div>
       <swiper
      :current="swiperCurrent"
       @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        :style="{ height: '100%' }"
        v-for="(item, index) in msgList"
        :key="index"
      > 
      <div class="showDataC" > 

                <div @click="goDetailedM"   class="showDataC-item" v-for="(item,index) in msgList[current].data " :key="index" >
                       <div class="head">
                            <div style="display: flex;
align-items: center;">
                            <img v-if="current==0" style="width: 1rem;margin-right: 0.2rem;" src="../../style/image/home/prolify.png" alt="">
                           
                             <img v-else style="width: 1rem;margin-right: 0.2rem;" src="../../style/image/home/horn.png" alt="">
                              <!-- <img src="../../style/image/home/horn.png" alt=""> -->
                            <div>收益</div>
                            </div>
                       <div style="
font-size: 0.61rem;
font-family: PingFang SC;
font-weight: 400;
color: #666666;">2020-07-25 19:20</div>
                       </div>
                       
                       <div class="showDataC-content">
                            订单编号：203164778(UC8000)订单已完成，收益+<span>3.50</span>元。
                       </div>   
                </div>
      </div>

      <!-- <div>{{item}}</div>
      <div>{{item}}</div>
      <div>{{item}}</div>
      <div>{{item}}</div>
      <div>{{item}}</div>
      <div>{{item}}</div>
      <div>{{item}}</div> -->
        <!-- <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
        </scroll-view> -->
      </swiper-item>
    </swiper>
      </div>


       


     

    </div>
    </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
// import uNavbar from '@/uview-ui/components/u-navbar/u-navbar.vue'

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public checked = true;
  public current = 0; // tabs组件的current值，表示当前活动的tab选项
  public swiperCurrent = 0;
  public msgList = [
        {
            data:[ '1','2','3' ]
        },
        {
            data:[ '1','2' ]
        },
         {
            data:[ '1','2' ]
        },
  ];

  public list = [
    {
      name: `收益通知`,
      count: 5,
    },
    {
      name: "交易通知",
      ate_count: 5,
    },
    {
      name: "系统公告",
      ate_count: 5,
    },
  ];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  tabsChange(index: any) {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    console.log(index);
    this.current = index;
    this.swiperCurrent = index;
  }
  transition(data:any) {
    // console.log(data)
  }
  animationfinish(data:any) {
    console.log(data.target.current, "data11111");

    this.current = data.target.current;
  }

  goDetailedM(){

       uni.navigateTo({
      url: "./msgDetailed",
    });
  }

   
}
</script>

<style  scoped>
uni-swiper {
  display: block;
  height: 80vh;
}

.msgP {
  background-color: #f3f5f7;
  height: 100vh;
}
.hr {
  height: 1rem;
  background-color: #f3f5f7;
}
.showDataC-item {
  margin: 0.5rem;
  background-color: white;
  border-radius: 0.3rem;
}

.head {
  border-bottom: 1px solid #f3f5f7;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.5rem;
  align-items: center;
}

.showDataC-content {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #333333;
  padding: 1rem;
}
</style>